<template>
    <div class="register">

       <form class="row g-3">
           <div class="col-md-8">
                <input type="text" class="form-control" :class="{'is-invalid':newPasswordRef.error}" id="validationServer01" required placeholder="名字" v-model="newPasswordRef.val" autofocus>
                <!-- <div id="passwordHelp" class="form-text" v-show="!passwordRef.error">密码至少包含数字和英文，长度6-20</div> -->
                <div class="invalid-feedback" v-show="newPasswordRef.error">
                {{newPasswordRef.message}}
                </div>
            </div>

            <div class="col-md-8">
                <input type="email" class="form-control" id= "validationServer02"  :class="{'is-invalid': emailRef.error}" required placeholder="邮箱" v-model="emailRef.val" @blur="emailValidate">
                <div id="emailHelp" class="form-text" v-show="!emailRef.error">请输入邮箱号,如1234567890@qq.com</div>
                <div class="invalid-feedback" v-show="emailRef.error">
                {{emailRef.message}}
                </div>
            </div>

            <div class="col-md-8">
                <input type="password" class="form-control" :class="{'is-invalid': passwordRef.error}" id="validationServer03" required placeholder="密码" v-model="passwordRef.val">
                <div id="passwordHelp" class="form-text" v-show="!passwordRef.error">密码至少包含6位数字</div>
                <div class="invalid-feedback" v-show="passwordRef.error">
                {{passwordRef.message}}
                </div>
            </div>

            <!-- <div class="col-md-8">
                <input type="password" class="form-control" :class="{'is-invalid':newPasswordRef.error}" id="validationServer02" required placeholder="确认密码" v-model="newPasswordRef.val" @blur="newPasswordValidate">
                <div class="invalid-feedback" v-show="newPasswordRef.error">
                {{newPasswordRef.message}}
                </div>
            </div> -->

            <!-- <div class="col-md-8">
                <input type="password" class="form-control code" :class="{'is-invalid': codeRef.error}" id="validationServer02" required placeholder="验证码" v-model="codeRef.val" @blur="codeValidate">
                <button class="btn-primary aquire">获取验证码</button>
                <div class="invalid-feedback" v-show="codeRef.error">
                {{codeRef.message}}
                </div>
            </div> -->

            <div class="container">
                <div class="row">
                    <div class="col-sm">
                        <router-link to="/login"><a href="#">登录</a></router-link>
                    </div>
                    <!-- <div class="col-sm">
                    <a href="#">忘记密码？</a>
                    </div> -->
                </div>
            </div>

            <button class="btn btn-primary" @click="register" type="button">注册</button>
            
        </form>

    </div>
</template>

<script lang="ts">
import qs from 'qs'
import axios from 'axios'
import {useStore} from 'vuex'
import { useRouter } from "vue-router";
import { defineComponent, reactive} from 'vue'

//邮箱验证正则表达式
const emailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
// const passwordReg =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

export default defineComponent({
    name: 'login',
    setup() {
        const emailRef = reactive({
            val: '',
            error: false,
            message: '',
        })
        const emailValidate = () => {
            if(emailRef.val === '') {
                emailRef.error = true
                emailRef.message = '内容不能为空！'
            } else if(!emailReg.test(emailRef.val) ) {
                emailRef.error = true
                emailRef.message = '邮箱输入错误！'
            } else {
                emailRef.error = false
            }
        }

        const passwordRef = reactive({
            val: '',
            error: false,
            message: '',
        })
        // const passwordValidate = () => {
        //     if(passwordRef.val === '') {
        //         passwordRef.error = true
        //         passwordRef.message = '内容不能为空！'
        //     } else if(!passwordReg.test(passwordRef.val) ) {
        //         passwordRef.error = true
        //         passwordRef.message = '密码错误！'
        //     } else {
        //         passwordRef.error = false
        //     }
        // }

        const newPasswordRef = reactive({
            val: '',
            error: false,
            message: '',
        })
        // const newPasswordValidate = () => {
        //     if(newPasswordRef.val === '') {
        //         newPasswordRef.error = true
        //         newPasswordRef.message = '内容不能为空！'
        //     } else if(!passwordReg.test(passwordRef.val) ) {
        //         newPasswordRef.error = true
        //         newPasswordRef.message = '密码错误！'
        //     } else {
        //         newPasswordRef.error = false
        //     }
        // }

        const codeRef = reactive({
            val: '',
            error: false,
            message: '',
        })
        const codeValidate = () => {
            if(codeRef.val === '') {
                codeRef.error = true
                codeRef.message = '内容不能为空！'
            } else if(!emailReg.test(emailRef.val) ) {
                codeRef.error = true
                codeRef.message = '邮箱输入错误！'
            } else {
                codeRef.error = false
            }
        }

        const store = useStore()
        const router = useRouter()
        const register = () => {
            let postData = qs.stringify({
                username: newPasswordRef.val,
                email: emailRef.val,
                password: passwordRef.val,
            })
            axios.post(`/api/user/register`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

                if (res.status === 200) {
                    alert(res.data)
                    // console.log(res.data)
                    // console.log("222")
                    if(res.data === "注册成功" || res.data === "该邮箱已经注册") {
                        router.push('/login')
                        store.commit('setRouter', '/register')
                    }
                    // context.emit('isLogin', res.data)
                    // console.log(context)
                }
            })
        }

        return {
            emailRef,
            emailValidate,
            passwordRef,
            // passwordValidate,
            newPasswordRef,
            // newPasswordValidate,
            codeRef,
            codeValidate,
            register,
        }
    },
})
</script>

<style lang="stylus" scoped>
.register
  form 
    width 60%
    margin-left 20%
    margin-top 1%
    height 30rem
    padding-top 60px
    border 1px #ccc solid 
    border-radius 20px
    box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
    background-color #fff
    .col-md-8
      margin-top 0px
      margin-left 16%
      //background-color red
      .form-control
        // margin-left 25%
      .form-text
        width 60%
        // margin-left 25%
        text-align left
        font-size 16px
        color #ccc 
      .invalid-feedback
        // margin-left 25%
        text-align left
      .code
        width 60%
      .aquire
        position fixed
        margin-left 8.5%
        margin-top -2.8%
        border-radius 10px
    .container
      font-size 18px
      color #ccc 
      width 65%
      margin-top -10px
      text-align left
      a 
        color #ccc
        text-decoration none
      a:hover
        color #0d6efd
    .btn 
      width 30%
      height 50px
      margin-left 35%
</style>
